<template>
    <div id="en">
        <!-- 条件选择框 -->
        <div class="query">
            <span>翻译成的语言：</span>
            <select>
                <option value="italy">意大利</option>
                <option value="english">英语</option>
                <option value="german">德语</option>
            </select>
        </div>

        <!-- 翻译框 -->
        <div class="box">
            <div class="input-wrap">
                <textarea v-model="obj.words"></textarea>
                <span><i>⌨️</i>文档翻译</span>
            </div>
            <div class="output-wrap">
                <div class="transbox">mela{{obj.words}}</div>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: "7-v-computed计算属性",
        data() {
            return {
                // words: ''
                obj: {
                    words: ''
                }
            }
        },
        methods: {

        },
        // 具体讲解：(1) watch语法 (2) 具体业务实现
        watch: {
            // 该方法会在数据变化时调用执行
            // newValue新值, oldValue老值（一般不用）
            // words (newValue) {
            //   console.log('变化了', newValue)
            // }

            'obj.words' (newValue) {
                console.log('变化了', newValue)
            }
        }
    }
</script>

<style scoped>

</style>
